<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="../../theme_engine/lib/jscssp/cssParser.js"></script>
    <script type="text/javascript">

        function init() {

            var str = "Visit W3Schools!";
            var n = str.search(/w3Schools/i);

            var re = /([\w\d\.-]+)[^{}]*{[^}]*}/igm; // Getting CSS Selectors list
            var propList = /{([^}]+)}/i; //Getting properties of CSS selector
            var singleProp = /(.+?):(.+?)/gim; //Get single prop

            var str = 'body {    color : #FFFEEE;    font-wheight : bold;} test { color : #FFFEEE;    font-wheight : bold;}';
            var subst = '';
            var search = str.match(re);
            var search2 = search[0].match(propList);
            var propL3 = search2[0].match(singleProp);
            var list = search2[0].split(';');
            var propL = list[0].match(singleProp);

            var b = 'sda';
        }


        function doit() {
            var source = document.getElementById("source");
            var ss = source.value;

            var parser = new CSSParser();
            var sheet = parser.parse(ss, false, true);
            var serialization = document.getElementById("serialization");
            if (sheet)
                serialization.innerHTML = sheet.cssText();
            else
                serialization.innerHTML = "";
        }
    </script>
</head>
<body>
<div id="main">
    <div id="header">
        <h1>JSCSSP <span id="subheader">a CSS parser in JavaScript</span></h1>
    </div>
    <ul id="nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="news.html">News</a></li>
        <li><a href="freshmeat.html">Downloads</a></li>
        <li><a href="faq.html">FAQ</a></li>
        <li><a href="doc.html">Doc</a></li>
    </ul>
    <div class="contentArea">
        <p>JSCSSP is a CSS parser written in cross-browser JavaScript. It parses a
            string containing CSS styles and outputs a CSS Object Model (warning: not
            <em>the</em> CSS Object Model). It can preserve some comments, at-rules and style
            rules that your browser does not recognize and trashes, and even whitespaces
            if you absolutely need to preserve indentation and blank lines.</p>
        <p><span style="background-color: red; color: white; border-radius: 4px; padding: 0px 4px">NEW</span>
            JSCSSP now has support for CSS Media Queries</p>
        <p>JSCSSP is <strong>NOT</strong> based on regular expressions for parsing, making it robust and easily extensible.</p>
        <p>It's very simple to use and manipulate,
            and can be used to write a CSS validator, filters or even CSS extensions
            for a given browser. Here is the whole code for the interactive demo below:</p>
    <pre class="brush: js">var source = document.getElementById("source");
var ss = source.value;

var parser = new CSSParser();
var sheet = parser.parse(ss, false, true);
var serialization = document.getElementById("serialization");
if (sheet)
  serialization.innerHTML = sheet.cssText();
else
  serialization.innerHTML = "";</pre>
        <div class="rounded"><h5>Interactive demo:</h5>
            <div class="innerbox">
                <p>You can edit the stylesheet in the textarea just below. Press on the "Parse and
                    Reserialize" button to see how JSSCSSP handles it.
                    <strong>Warning</strong>: JSCSSP is still a work in progress so please don't be too
                    surprised if you hit a bug...</p>
                <textarea style="width: 100%" rows="15" id="source" spellcheck="false">/* JSCSSP test */
                    @media screen AND (max-width: 500px) { body { background-color: #f0f0f0; }}

                    @keyframes my_anim { from { opacity: 1; } to { opacity: 0; } }

                    body { var-my-margin: 12px }
                    h1 {  margin-top: var(my-margin);
                    background-image: linear-gradient(to top, white, #c0c0c0); }

                    /* shorthands */
                    #myP { border: thin groove silver; }

                    /* escapes */
                    .f\00C4 oo { p\roperty: value; content: "foo \
                    bar" }</textarea>
                <p>
                    <button onclick="doit()">Parse and reserialize below</button>
                </p>
                <p>JSCSSP is called to parse the
                    stylesheet and here's how JSCSSP reserializes it:</p>
                <pre id="serialization"></pre>
            </div>
        </div>
    </div>
    <div id="footer">Copyright &copy; 2010-2011 Daniel Glazman</div>
</div>

</body>
</html>